<template>
  <view class="page">
    <navigation title="忘记密码" redirectTo="/pa"></navigation>
    <!-- 验证手机号 -->
    <view class="list-box" v-if="isShow">
      <view class="list-item">
        <view class="list-title">手机号</view>
        <view class="list-content">
          <input type="number" v-model="apiParams.mobile" placeholder="请输入手机号" />
        </view>
      </view>
      <view class="list-item">
        <view class="list-title">验证码</view>
        <view class="list-content">
          <input type="number" v-model="apiParams.code" placeholder="请输入验证码" />
          <button class="code-btn" type="default" :disabled="codeLoading" @click="sendCode">{{codeMsg}}</button>
        </view>
      </view>

      <view class="list-btn">
        <button type="default" @click="nextStep">下一步</button>
      </view>
    </view>

    <!-- 修改密码 -->
    <view class="list-box" v-else>
      <view class="list-item">
        <view class="list-title">新密码</view>
        <view class="list-content">
          <input type="password" @blur="checkPassword" v-model="apiParams.password" placeholder="请输入新密码" />
          <view class="tips" v-if="showPwdMsg">新密码必须包含大小写字母及数字且不低于8位</view>
        </view>
      </view>
      <view class="list-item">
        <view class="list-title">确认密码</view>
        <view class="list-content">
          <input type="password" v-model="confirmPwd" placeholder="请再次输入密码" />
        </view>
      </view>
      <view class="list-btn">
        <button type="default" class="back-btn" @click="backStep">上一步</button>
        <button type="default" @click="submit">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import navigation from '@/component/navigation.vue';

import sun from '@/utils/sun.js'

export default {
  components: {
    navigation
  },

  data() {
    return {
      isShow: true,

      apiParams: {
        mobile: '',
        code: '',
        password: '',
      },

      codeMsg: '获取验证码',
      codeLoading: false,
      timeCount: 60,
      timer: null,

      showPwdMsg: false, // 密码提示
      confirmPwd: '',

    };
  },
  methods: {
    // 获取验证码
    sendCode() {
      let that = this
      let checkMobile = /^1[3-9][0-9]\d{8}$/;
      if (that.apiParams.mobile == '') {
        uni.showToast({
          icon: 'none',
          title: '手机号不能为空'
        })
      } else if (!checkMobile.test(that.apiParams.mobile)) {
        uni.showToast({
          icon: 'none',
          title: '手机号格式不正确'
        })
      } else {
        that.codeMsg = that.timeCount + 's后重新发送';
        that.codeLoading = true;
        that.timer = setInterval(() => {
          that.timeCount--;
          that.codeMsg = that.timeCount + 's后重新发送';
          if (that.timeCount == 0) {
            that.codeLoading = false;
            clearInterval(that.timer);
            that.timer = null;
            that.codeMsg = '重新发送';
            that.timeCount = 60;
          }
        }, 1000);
        sun.request({
          url: "/api/ucenter.passport/loginCode",
          showLoading: true,
          token: false,
          data: {
            mobile: that.apiParams.mobile
          },
          success(res) {
            if (res.code == 200) {
              that.getCode = res.data.code
              uni.showToast({
                icon: "none",
                title: "验证码发送成功，请注意查看短信",
              })
            } else {
              uni.showToast({
                icon: "none",
                title: res.msg
              })
              that.codeLoading = false;
              clearInterval(that.timer);
              that.timer = null;
              that.codeMsg = '重新发送';
              that.timeCount = 60;
              return false;

            }
          },
          fail(code, msg) {
            uni.showToast({
              icon: "none",
              title: code + "数据获取失败~",
            })
          }
        })
      }
    },
    // 下一步
    nextStep() {
      let _this = this;
      let checkMobile = /^1[3-9][0-9]\d{8}$/;
      if (_this.apiParams.mobile == '') {
        uni.showToast({
          icon: 'none',
          title: '手机号不能为空'
        })
        return false
      }
      if (!checkMobile.test(_this.apiParams.mobile)) {
        uni.showToast({
          icon: 'none',
          title: '手机号格式不正确'
        })
        return false
      }
      if (_this.apiParams.code == '') {
        uni.showToast({
          icon: 'none',
          title: '验证码不能为空'
        })
        return false
      }
      sun.request({
        url: "/api/ucenter.passport/checkCode",
        showLoading: true,
        token: false,
        data: {
          mobile: _this.apiParams.mobile,
          code: _this.apiParams.code,
        },
        success(res) {
          if (res.code == 200) {
            uni.showToast({
              icon: "none",
              title: res.msg,
            })
            _this.isShow = false;
          } else {
            _this.isShow = true
            uni.showToast({
              icon: "none",
              title: res.msg
            })

          }
        },
        fail(code, msg) {
          uni.showToast({
            icon: "none",
            title: code + "数据获取失败~",
          })
        }
      })
    },

    // 上一步
    backStep() {
      this.isShow = true
    },

    // 检测密码
    checkPassword() {
      let checkPassword = new RegExp("(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]{6,12}")
      let password = this.apiParams.password
      if (!checkPassword.test(password)) {
        this.showPwdMsg = true
      } else {
        this.showPwdMsg = false
      }
    },

    // 提交
    submit() {
      let apiParams = this.apiParams
      let checkPassword = new RegExp("(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]{6,12}")
      if (apiParams.password == '') {
        uni.showToast({
          icon: 'none',
          title: '新密码不能为空'
        })
      } else if (!checkPassword.test(apiParams.password)) {
        uni.showToast({
          icon: 'none',
          title: '新密码必须包含大小写字母及数字且不低于6位'
        })
      } else if (this.confirmPwd != apiParams.password) {
        uni.showToast({
          icon: 'none',
          title: '两次密码输入不一致'
        })
      } else {
        sun.request({
          url: "/api/ucenter.passport/forget",
          showLoading: true,
          token: false,
          data: apiParams,
          success(res) {
            if (res.code == 200) {
              uni.showToast({
                icon: "none",
                title: res.msg
              })
              uni.redirectTo({
                url: "/pages/login/login"
              })
            } else {
              uni.showToast({
                icon: "none",
                title: res.msg
              })
            }
          },
          fail(code, msg) {
            uni.showToast({
              icon: "none",
              title: code + "数据获取失败~",
            })
          }
        })
      }
    },
  },
}
</script>

<style lang="less">
.page {
  padding: 0 64upx;

  .list-box {
    .list-item {
      display: flex;
      padding-top: 20upx;

      .list-title {
        padding: 16upx;
        width: 20%;
        font-size: 28upx;
      }

      .list-content {
        position: relative;
        flex: 1;

        .tips {
          color: red;
          font-size: 24upx;
        }

        input {
          padding: 16upx;
          font-size: 24upx;
          border-bottom: 1upx solid rgba(226, 226, 226, 1);
        }

        .code-btn {
          position: absolute;
          height: 28px;
          line-height: 28px;
          top: 0;
          right: 0;
          font-size: 24upx;
          background-color: rgba(64, 108, 235, 1);
          color: #fff;
          border-radius: 30px;
        }
      }
    }

    .list-btn {
      display: flex;
      padding-top: 40upx;
      justify-content: center;

      .back-btn {
        color: #000;
        background-color: #fff;
        border: 1px solid #dedede;
      }

      button {
        margin: 20upx;
        width: 50%;
        height: 80upx;
        line-height: 80upx;
        color: #fff;
        border-radius: 30px;
        background-color: rgba(64, 108, 235, 1);
      }
    }
  }
}
</style>
